<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>匹配所有单选按钮</title>
		<style>
			*{
				font-size: 14px;
				font-family: "微软雅黑";
				margin-top: 10px;
			}
			
			label{
				display: block;
				font-size: 14px;
				background-color: #ef5b00;
				color: white;
				height: 30px;
				line-height: 30px;
				text-align: left;
				display: block;
				cursor: pointer;
				width: 350px;
				font-family: "微软雅黑";
				/*去掉边框的关键代码*/
				border: 0 none;
			}
			
			label:hover{
				cursor: pointer;
			}
			
			.r{
				border: 3px solid red;
			}
		</style>
	</head>
	<body>
		 
		 <ul>
		 	<li age="34">北京</li>
		 	<li >上海</li>
		 	<li>广州</li>
		 </ul>
		  
	
		<input type="text" id='deleteCity' value="北京" />
	
		<label onclick="addBefore()">内部的前面增加深圳</label>
		<label onclick="addAfter()">内部的后面增加深圳</label>
		<label onclick="deleteCity()">删除</label>
		
	</form>
	</body>
	<!--Step1:导入jquery-->
	<script type="text/javascript" src="../../../js/jquery-1.4.1.js" ></script>
	<script>
	
	
		function deleteCity(){
			
			console.log('xx...');
			
			
			//在删除之前打印age
			var age  = $('li[age="34"]').attr('age');
			console.log('age before='+age);
			
			var city = $('#deleteCity').val();
			
			
			$('ul>li').each(function(index,data){
				
				var _data = $(data);
				
				
				var c = _data.html();
				
				if(c === city){
					
					//删除1个元素 只有1种   所谓的自杀模式 remove
					_data.detach();
				}
				
				
			});
			
			
			//在删除之前打印age  detach remove
			var age  = $('li[age="34"]');
			console.log('age after='+age);
		}
		
		function addBefore(){
			//在内部 前面插入
			$('ul').prepend($('<li style="color: red;">深圳前</li>'));
			
		}
		
		function addAfter(){
			
			//在内部 后面插入
			$("ul").append($("<li style='color: green;'>深圳后</li>"));
			
		}
		
	</script>
</html>

